<template>
  <div class="pumpDetails">
    <TitleColumn name="泵闸详情" isColumn/>
    <div class="content">
      <MonitorTable />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';
  import MonitorTable from './MonitorTable/index.vue';

  defineOptions({ name: 'PumpDetails' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .pumpDetails {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
    box-sizing: border-box;
    background: #02123433;
    backdrop-filter: blur(10px);
    .content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      padding: 6px 16px;
    }
  }
</style>
